<template>
    <div>
        <el-card>
            <div class="queryPanel">
                <div>
                    <el-input v-model="queryData.member" placeholder="员工名称" size="small"></el-input>
                    <el-button type="primary" @click="queryDataHandle" size="small">查询</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button plain @click="resetQuery" size="small">重置</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="$emit('currentHandle', 'setMoments')" size="small">朋友圈设置</el-button>
                    <el-button type="primary" size="small">导出链接</el-button>
                </div>
            </div>
            <div class="interspaceH"></div>
            <el-table :data="dataSource" style="width: 100%" :header-cell-style="{background:'#F3F4F7',color:'#555'}">
                <el-table-column prop="member" label="企业成员"></el-table-column>
                <el-table-column prop="historyLink" label="历史朋友圈链接"></el-table-column>
                <el-table-column prop="pageView" label="客户浏览量" sortable></el-table-column>
                <el-table-column prop="contentNumber" label="内容条数" sortable></el-table-column>
                <el-table-column prop="recentlySendTime" label="最近发布时间" :formatter="formatter"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="copyLinkHandle(scope.row)" type="text" size="small">复制链接</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="interspaceH"></div>

            <el-pagination :current-page="tablePage"
                           :page-sizes="[10, 15, 20, 25]" :page-size="10" layout="total, sizes, prev, pager, next"
                           :total="dataSource.length">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import SetMoments from "./set_moments";
export default {
    name: "member",
    components: {SetMoments},
    data() {
        return {
            tablePage: 0,
            queryData: {
                member: ''
            },
            fieldType: {
                recentlySendTime: 'datetime'
            },
            dataSource: [
                {
                    member: '张三',
                    historyLink: 'http://cos.tpchain.net/',
                    pageView: '0',
                    contentNumber: '1',
                    recentlySendTime: new Date()
                }
            ]
        }
    },
    mounted() {
        this.queryDataHandle()
    },
    methods: {
        queryDataHandle() {
            let that = this;
        },
        resetQuery() {
            this.queryData = queryData
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this[field]);
        },
        copyLinkHandle(row) {
            this.$message({
                showClose: true,
                message: '复制成功：' + row.historyLink,
                type: 'success'
            });
        }
    }
}
</script>

<style scoped>
.queryPanel .el-input {
    width: 200px;
}

.queryPanel {
    display: flex;
    justify-content: space-between
}

.queryPanel .el-select {
    width: 200px;
}
</style>
